<template>
	<div>
		<div class="item border-bottom" v-for="(item,index) of list" :key="index">
			<div class="item-title">
				<span class="item-title-icon "></span>
				{{item.title}}
					<div v-if="item.children" class="item-children" >
						<detail-list :list="item.children"></detail-list>
					</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'DetailList',
		props: {
			list: Array
		}
	};
</script>

<style lang="stylus" scoped>
	.border-bottom
		&:before
			border-color: #ccc
		&:after
			border-color: #ccc
		.item-title
			line-height: .58rem
			font-size: .3rem
			padding-left: .6rem
			position: relative
			.item-title-icon
				position: absolute
				left: .2rem
				top: .1rem
				display: inline-block
				width: .4rem
				height: .4rem
				margin-right: .1rem
				background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
				background-size: .4rem 3rem;
				.item-children
					line-height: .58rem
					font-size: .3rem

</style>